<template>
    <section class="info" id="info">
        <h1 class="title">个人信息</h1>
        <form>
            <div style="display: flex; text-align: center;justify-content: center;">
                <el-upload v-model:file-list="fileList" list-type="picture-card" :auto-upload="false">
                    <el-icon style="background-color: white;">
                        <Plus />
                    </el-icon>
                </el-upload>
            </div>
            <input type="text" placeholder="nickname" class="box" v-model="ruleForm.nickName">
            <input type="email" placeholder="email" class="box" v-model="ruleForm.email">
            <input type="phone" placeholder="phone" class="box" v-model="ruleForm.phonenumber">
            <textarea name="" class="box" placeholder="signature" cols="30" rows="10"
                v-model="ruleForm.signature"></textarea>
            <a class="btn" @click="handleConfirm">修改数据</a>
        </form>
    </section>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { updateUserAPI, UploadImgAPI } from '@/api'
import { useUserInfoStore } from '@/store/userInfo/index.js'
import { useRouter } from 'vue-router'

const $router = useRouter()

const props = defineProps({
    initInfoValue: {
        type: Object,
        default: {}
    }
})

const originaluserData = () => ({
    id: '',
    nickName: '',
    phonenumber: '',
    email: '',
    avatar: '',
    signature: ''
})

const fileList = ref([])

let ruleForm = reactive(originaluserData())

const handleConfirm = async () => {
    //先获取fileList图片调后端接口上传图片
    const formData = new FormData()
    if (fileList.value[0].raw) {
        formData.append("file", fileList.value[0].raw)
        const res = await UploadImgAPI(formData)
        ruleForm.avatar = res
    }
    let ras = reactive()
    ras = await updateUserAPI(ruleForm)
    if (ras != false) {
        useUserInfoStore().setUserInfo(ruleForm)
        ElMessage.success("修改成功")
    }
    else {
        $router.push({
            path: '/login',
        }).catch(err => { })
    }
}

watch(() => props.initInfoValue,
    () => {
        let img = []
        let obj = {}
        ruleForm = props.initInfoValue
        obj.url = ruleForm.avatar
        img.push(obj)
        fileList.value = img
    }, { deep: true, immediate: true })

</script>


<style lang="scss" scoped>
section {
    min-height: 100vh;
    padding: 2rem;
}

.info form {
    margin: 2rem auto;
    max-width: 70rem;
    border-radius: .5rem;
    box-shadow: .4rem .4rem 1rem #ccc,
        -.4rem -.4rem 1rem #fff;
    padding: 2rem;
}

.info h1 {
    font-size: 5rem;
    color: #222;
    text-align: center;
    align-items: center;
    margin-bottom: 4rem;
}

.info form .box {
    padding: 1rem 1.5rem;
    width: 100%;
    background: none;
    border: none;
    color: #222;
    font-size: 1.6rem;
    text-transform: none;
    margin: .7rem 0;
    box-shadow: .4rem .4rem 1rem #ccc,
        -.4rem -.4rem 1rem #fff;
    border-radius: .5rem;
}

.info form textarea {
    height: 20rem;
    resize: none;
}

.btn {
    margin-top: 1rem;
    display: inline-block;
    padding: 1rem 3.5rem;
    border-right: .5rem;
    font-size: 1.7rem;
    cursor: pointer;
    background: none;
    color: #222;
    box-shadow: .4rem .4rem 1rem #ccc,
        -.4rem -.4rem 1rem #fff;
}

@media (max-width:450px) {

    .info h1 {
        font-size: 3rem;
    }
}
</style>
